<template>
  <article class="security-menu">
    <n-input v-model:value="searchKey" @update:value="onChange" placeholder="请输入名称搜索"/>
    <n-spin :show="loading">
      <n-menu
        class="menu-list"
        v-model:value="activeKey"
        :options="menuList"
        mode="vertical"
        key-field="unId"
        label-field="label"
        children-field="null"
        @update:value="handleSelect"
      ></n-menu>
    </n-spin>
  </article>
</template>

<script lang="ts" setup>
import { computed, ref, toRefs } from 'vue';
import { debounce } from 'lodash-es';

const props = defineProps({
  menuList: {
    type: Array,
    default: () => ([])
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['select', 'search'])
const activeKey = ref('')
const searchKey = ref()

function handleSelect(value: string, item: any) {
  console.log('select', item)
  emits('select', item)
}
const onChange = debounce((val: string) => {
  emits('search', val);
}, 500);
</script>

<style lang="less" scoped>
.security-menu {
  height: 720px;
}
.menu-list {
  height: 650px;
  overflow-y: auto;
}
</style>